Cascading Style Sheets 階層式樣式表
三種方式改變樣式
第一種 <div style = "background:red;"> 這種很難維護，因為跟 CSS 混在一起
第二種 加在 head 裡面
<head>
<style>
div {
background: red;
}
</style>
</head>
第三種 最好維護，新開一個 CSS 的檔案
html 檔案放在 head 裡面 <link rel = "stylesheet" href="./style.css">
Selector 我全部都要
- Universal selectors
星號，所有元素都會變紅色
* {
coler: red;
}
- 標籤
所有div背景都會是紅色，body整個都是綠色
div {
background: red;
}
body{
background: green;
}
- id 和 class
#代表 id 的意思，後面接 id 名稱，整份只能有一個 id
.代表 class 的意思，後面接 class 名稱 ，class 可以共享，一個元素也可以設定不只一個 class
// css 檔案
# idName {
background: red;
}
.bg-yellow {
background: yellow
}
.text-white {
color: white
}
// html 檔案
<div id = "idName">
hello
</div>
<div class = "bg-yellow">
hello2
</div>
<div class = "bg-yellow" text-white>
hello3
</div>
- 同時符合
例如 : 需要同時是div，class 是bg-yellow才顯現背景黃色
// css 檔案
div.bg-yellow {
background: yellow
}
// html 檔案
<div class = "bg-yellow">
hello2 // 只有這個會顯示背景黃色
</div>
<span class = "bg-yellow" text-white>
hello3
</span>
// css 檔案
.bg-yellow.bg-real-yellow {
background: yellow
}
// html 檔案
<div class = "bg-yellow">
hello2
</div>
<span class = "bg-yellow bg-real-yellow">
hello3 // 只有這個會顯示背景黃色
</span>
- 底下元素
// css 檔案
.lv1 > div { // 只要是 lv1 下一層的 div 都會被選到，如果沒有 > 符號，是空白則是指.lv1 底下所有的 div 都會被選到
background: red
}
// html 檔案
<div class="lv1">lv1
<div>lv2 // 會被選到
<div>lv3</div>
</div>
<div>lv4 // 會被選到
</div>
</div>
- 旁邊的元素 + 和 ~ (同一層才有用)
// css 檔案
.bg-red + .bg-red { // 旁邊也是.bg-red 的 .bg-red 才會顯示紅色
background: red
}
// html 檔案
<div class="bg-red">div1</div>
<div>div2</div>
<div class="bg-red">div3</div>
<div class="bg-red">div4</div> // 只有它會顯示紅色
// css 檔案
.bg-red ~ .bg-red { // bg-red 旁邊所有的 bg-red 都會顯示紅色
background: red
}
// html 檔案
<div class="bg-red">div1</div>
<div>div2</div>
<div class="bg-red">div3</div> // 顯示紅色
<div class="bg-red">div4</div> // 顯示紅色
- Pseudo-classes : hover (以 hover 為例)
偽元素一覽表：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
span:hover {
background: red // 所有 span 滑鼠移上去背景都會變紅色
}
- nth-child
// css 檔案
.wrapper div:nth-child(3) { // 只有第三個變紅色
background: red
}
.wrapper div:nth-child(odd) { // 基數都是背景變紅色
background: red
}
.wrapper div:nth-child(3n) { // 3的倍數都是背景變紅色
background: red
}
.wrapper div:nth-child(3n+1) { // 1.4.7....背景變紅色
background: red
}
- pseudo-element 偽元素
其中兩個是 before 、 after
before 是在前面加，after 是在後面加，一定要放 content
// css 檔案
.wrapper::before {
content:"$"; // 在 html 那邊便不用打 $ ，用 css 產生文字
color: red
}
// css 檔案
.price::after {
content: attr(class)
}
// html 檔案
<div class="price">
1000 // 顯現出來的就會是 1000 price
</div>
- 權重計算方式
id > class > 標籤
物以稀為貴，整份只會有一個 id ，標籤是會一拖拉庫
越詳細越贏
按照順序比下來，優先順序一樣的話，會以後面的為準
| id | class、pseudo class、sttribute | tag(element) |
|---|---|---|
| 0 | 0 | 0 |
但以上都敵不過 inline style
1, 0, 0, 0
奧義 : !important
1, 0, 0, 0, 0
延伸閱讀：
